<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const props = defineProps(['galleryInfo'])
const imgList = computed(() => {
  return props.galleryInfo.image.split(',')
})
</script>

<template>
<div class="gallery-item">
  <yk-space dir="vertical" :size="12" style="width:100%">
    <yk-space dir="vertical" :size="2" class="gllery-imgs">
      <yk-image
        :src="imgList[0]"
        width="240"
        height="160"
        title=" "
      >
        <template #extra>
          <yk-space class="gallery-action" align="center">
            <yk-tooltip placement="topRight" title="编辑">
              <div class="gallery-edit"><IconFillOutline/></div>
            </yk-tooltip>
            <yk-popconfirm
              title="确认删除吗"
              content="删除后将无法恢复！！！"
              @confirm="deleteArticle"
            >
              <div class="gallery-delete"><IconDeleteOutline/></div>
            </yk-popconfirm>
          </yk-space>
        </template>
      </yk-image>
      <yk-space :size="2">
        <yk-image v-for="(img,index) in imgList" :key="index"
          :src="index > 0 ? img : ''"
          width="78"
          height="78"
        >
        </yk-image>
      </yk-space>
    </yk-space>
    <div class="gallery-info">
      <div class="gallery-title">验步确毛风加把状际</div>
      <yk-space style="width:100%" justify="between">
        <yk-space>
          <div class="gallery-view"><IconEyeOutline /> {{ props.galleryInfo.view }}</div>
          <div class="gallery-praise"><IconLikeOutline /> {{ props.galleryInfo.praise_count }}</div>
        </yk-space style>
        <div class="gallery-create_time">{{ formatTime(props.galleryInfo.create_time) }}</div>
      </yk-space>
    </div>
  </yk-space>
</div>
</template>

<style scoped lang='less'>
.gallery-item {
  width:240px;
  &:hover {
    .gllery-imgs {

      .gallery-action {
        opacity: 1;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
      } 
    }
  }
  .gallery-info {
    width:100%;

    .gallery-title {
      font-weight: 600;
      font-size: 18px;
    }

    .gallery-create_time {
      color:@gray-6;
    }
  }

  .gllery-imgs {

      .gallery-action {
        z-index:2;
        opacity: 0;
        background-color: #ffffff8f;
        padding: 4px;
        border-radius: 8px;
        position: relative;
        right:10px;
        bottom:100px;

      * {
        &:hover {
          cursor: pointer;
          color: @pcolor;
        }
      }
      }
  }
}
</style>